<template>
	<view>
		<view class="cu-card article" :class="isCard?'no-card':''">
			<view class="cu-item shadow">
				<view class="title">
					<view class="text-cut">计算计网络</view>
				</view>
				<view class="content">
					<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593505191432&di=1c5d838f1f0c05376c5f08b69d0e7ca0&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D1893207556%2C1054268707%26fm%3D214%26gp%3D0.jpg"
					 mode="aspectFit"></image>
					<view class="desc">
						<view> 计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备，通过通信线路连接起来，在网络操作系统，网络管理软件及网络通信协议的管理和协调下，实现资源共享和信息传递的计算机系统。</view>
					</view>
				</view>
				<view class="base padding flex flex-wrap">
					<view class="padding-xs">计算机网络主要内容包括：\n </view>
					<view class="padding-xs" v-for="(item,index) in contentList" :key="index">
						<view class="cu-tag bg-cyan">{{item.name}}</view>
					</view>
					<image
						@tap="viewImg()"
						style="width: 100%;" 
						src="cloud://first-xlfs5.6669-first-xlfs5-1302491884/home/cs/jsjwlTree.png" 
						mode="aspectFill"
					>
					</image>
					<view class="padding-xs">
						对于前端来说应该了解网络基础，HTTP相关知识、状态码，这样对于请求响应的处理过程是有很大的好处的，优化你写的页面。
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCard: true,
				contentList: [
					{name:'计算机网络体系结构'},
					{name:'物理层'},
					{name:'数据链路层'},
					{name:'网络层'},
					{name:'传输层'},
					{name:'会话层'},
					{name:'表示层'},
					{name:'应用层'}
				],
				urls: ['cloud://first-xlfs5.6669-first-xlfs5-1302491884/home/cs/jsjwlTree.png']
			}
		},
		methods: {
			viewImg(){
				 //图片预览
				uni.previewImage({
				  urls: this.urls, // 当前显示图片的http链接
				  longPressActions: {
					  itemList: ['发送给朋友', '保存图片', '收藏'],
					  success: function(data) {
						  console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					  },
					  fail: function(err) {
						  console.log(err.errMsg);
					  }
				  }
				})
			}
		}
	}
</script>

<style>

</style>
